<script>
    export default {
        props:{
            value:{
                required:true,
                default(){
                    return 0
                }
            },
        },
        data(){
            return {
                val:this.value||''
            }
        },
        computed:{
            attrs(){
                const attrs = { ...this.$attrs }

                attrs['type'] = 'number'
                attrs['value'] = this.val
                return attrs
            },
            listeners(){
                const listeners = { ...this.$listeners }

                listeners['input'] = this.amountInput

                return listeners
            }
        },
        methods:{
            amountInput(e){
                if(typeof e !== 'string')
                    return

                this.val = e

                if(e === ''){
                    this.$emit('input',null)
                    return
                }

                const decimalReg = /^[0-9]+\.0{0,}$/
                if(decimalReg.test(e))
                    return
                
                this.$emit('input',parseFloat(e))
            }
        },
        watch:{
            value:function(value){
                this.val = value
            }
        }
    }
</script>

<template>
    <el-input v-bind="attrs" v-on="listeners" :min="0"/>
</template>